<template>
  <h1>$store.state.数据名</h1>
  <h2> {{ $store.state.num }} </h2>
  <h2> {{ $store.state.num2 }} </h2>
  <h2> {{ $store.state.num3 }} </h2>

  <h1>通过 辅助函数 mapStare 简化</h1>
  <h2> {{ num }} </h2>
  <h2> {{ num3 }} </h2>

  <button @click="setnum">修改 num 的值</button>
</template>

<script>
// 1 导入 辅助函数
import { mapState } from 'vuex';

export default {
  data(){
    return{}
  },
  computed:{
    // 使用辅助函数  ...mapState([XXX,YYY,ZZZ])
    ...mapState(['num','num3'])
  },
  methods:{
    setnum() {
      // console.log(this.$store);
      this.$store.commit('addNum')
    }
  }
}
</script>